<template>
  <div class="cube-page">
    <header class="header">
      <h2>支付弹出</h2>
      <i @click="navBack"
         class="cubeic-back"></i>
    </header>
    <main class="main-content">
      <div class="tips">正确密码为123456</div>

      <div style="margin: 20px 0">
        <cube-button @click="handleClick">支 付</cube-button>
      </div>
    </main>
    <PayLayer ref="payLayer"
              v-model="showLayer"
              @inputEnd="handleInputEnd"
              @close="handleClose"
              @forgetPassword="handleForget" />
  </div>
</template>

<script>
import PayLayer from "@/components/PayLayer.vue";
export default {
  name: "PayLayerDemo",
  components: {
    PayLayer
  },
  data() {
    return {
      showLayer: false,
      password: "123456"
    };
  },
  methods: {
    handleClick() {
      this.showLayer = true;
    },
    navBack() {
      this.$router.go(-1);
    },
    /**密码输入结束 */
    handleInputEnd(result) {
      let payLayer = this.$refs.payLayer;
      let timer = setTimeout(() => {
        if (result === this.password) {
          payLayer.success().then(() => {});
        } else {
          payLayer.fail();
        }
        clearTimeout(timer);
      }, 1500);
    },
    handleForget() {
      this.$createDialog({
        type: "alert",
        title: "点击了忘记密码",
        icon: "cubeic-alert"
      }).show();
    },
    handleClose() {
      this.$createDialog({
        type: "alert",
        title: "点击了关闭",
        icon: "cubeic-alert"
      }).show();
    }
  }
};
</script>

<style lang="less" scoped>
.tips {
  padding: 20px;
  text-align: center;
  color: #666;
}
</style>
